/*
 * @Description: 全屏遮罩组件
 * @Author: buwei.huang
 * @Date: 2019-07-15 10:01:41
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-19 17:39:27
 */
<template>
  <div
    @click="onCancle"
    v-if="isShade"
    class="shade_wrap"
  >
    <slot />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShade: false
    }
  },
  methods: {
    show() {
      this.isShade = true
    },
    hide() {
      this.isShade = false
    },
    onCancle() {
      this.$emit('hide')
    }
  }
}
</script>
<style>
.shade_wrap {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 111;
}
</style>
